<template>
  <div>
    <h4>
      #1-这是一个测试题的题目
      <i @click="lookAnswersTs" class="el-icon-question"></i>
    </h4>
    <el-checkbox-group v-model="checkboxList">
      <el-checkbox label="A) 测试题目选项1"></el-checkbox>
      <el-checkbox label="B) 测试题目选项2"></el-checkbox>
      <el-checkbox label="C) 测试题目选项3"></el-checkbox>
      <el-checkbox label="D) 测试题目选项4"></el-checkbox>
    </el-checkbox-group>
    <el-button-group>
      <el-button type="success" size="small" icon="el-icon-arrow-left"
        >上一题</el-button
      >
      <el-button type="success" size="small"
        >下一题<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
    </el-button-group>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      checkboxList: [],
    };
  },
  methods: {
    ...mapActions("test/study", ["getQuestionsList"]),
    lookAnswersTs() {
      alert("答案提示");
    },
  },
  mounted() {
    this.getQuestionsList();
  },
  computed: {
    ...mapState("test/study", ["list"]),
  },
};
</script>

<style scoped>
.el-checkbox-group .el-checkbox {
  display: block;
  margin-top: 15px;
}

.el-button-group {
  margin-top: 20px;
}

h4 i:hover {
  cursor: pointer;
}
</style>